<template>
  <div class="page-box">
    <el-form ref="propForm" :model="propForm.otherProperty" label-position="top" size="small" :rules="otherProperty_rules">
      <el-row :gutter="30">
        <el-col :span="24">
          <div class="card-title">其他物业信息</div>
        </el-col>

        <el-col :span="6">
          <el-form-item label="其他物业名称" prop="otherName">
            <el-input maxlength="30" placeholder="请输入" v-model="propForm.otherProperty.otherName"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="所属物业" prop="propertyName">
            <el-input placeholder="请选择所属物业" v-model="propForm.otherProperty.propertyName" @focus="openChooseDialog()"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="建筑面积(m²)" prop="buildArea">
            <el-input v-model="propForm.otherProperty.buildArea" placeholder="请输入建筑面积" :disabled="theSelectedProperty"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="管理权属" prop="manageUnit">
            <el-select v-model="propForm.otherProperty.manageUnit" placeholder="请选择管理所" :disabled="theSelectedProperty">
              <el-option v-for="item in manageUnits" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="物业地址" prop="cityCode" class="full">
            <el-row :gutter="10">
              <el-col :span="4">
                <div></div>
                <el-input v-model="cityCode.label" placeholder="请选择市" :disabled="theSelectedProperty" />
              </el-col>
              <el-col :span="4">
                <el-select placeholder="请选择区(县)" v-model="propForm.otherProperty.countyCode" :disabled="theSelectedProperty">
                  <el-option
                    v-for="item in (this.propForm.otherProperty.cityCode === '') ? [] : districtCollection"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-select placeholder="请选择街道(乡)" v-model="propForm.otherProperty.projectStreet" @change="handleChangeStreet" :disabled="theSelectedProperty">
                  <el-option
                    v-for="item in (this.propForm.otherProperty.countyCode === '') ? [] : streets"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-select
                  placeholder="请选择社区(村)"
                  v-model="propForm.otherProperty.communityName"
                  @change="handleChangeCommunity"
                  :disabled="theSelectedProperty"
                >
                  <el-option
                    v-for="item in (this.propForm.otherProperty.projectStreet === '') ? [] : communityNameStreet"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-input v-model="propForm.otherProperty.addressInfo" placeholder="请输入道路及门牌号" :disabled="theSelectedProperty"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="地图坐标" prop="mapCoordinates" style="position: relative;">
            <button type="button" @click="$refs.positionDialog.show()" style="position: absolute;top: -38px;left: 70px;">选择</button>
            <el-input v-model="propForm.otherProperty.mapCoordinates" placeholder="请输入地图坐标" suffix-icon="el-icon-map-location" :disabled="theSelectedProperty"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="VR地址" prop="vrUrl">
            <el-input placeholder="请输入VR地址" v-model="propForm.otherProperty.vrUrl" :disabled="theSelectedProperty"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="备注" class="full" prop="remarks">
            <el-input v-model="propForm.otherProperty.remarks" maxlength="333" placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="card-title">文件上传</div>
          <div style="padding: 20px 20px">
            <v-upload ref="myUpload" :busId="id" @onSuccess="sendFormData" :modelType="modelType" v-model="uploadFileList" :isView="false"></v-upload>
          </div>
        </el-col>

        <el-col :span="24" align="right">
          <el-button type="primary" v-throttle="[submitForm]">保存</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!-- 地图坐标选择弹窗 -->
    <positionDialog ref="positionDialog" @changeMessage="resetPosition" />
    <choose-dialog ref="chooseDialog" v-bind="chooseDialogAttrs" @chooseData="handleChoose" />
  </div>
</template>
<script src='./other_property_form.js'>
</script>

<style scoped lang="scss">
@import "./other_property_form";
</style>
